import React from 'react';
// 详情页组件
import { useParams, useHistory } from 'react-router-dom';
// 引入头部导航组件
import Mynavbar from '@/components/Mynavbar';
// 引入轮播图组件
import Myswiper from '@/components/Myswiper'
// 引入接口
import { getDetailApi, addCarApi, getCarListApi } from '@/api/detail'
import { useState, useEffect, useRef } from 'react'
// 引入antd
import { Button, Space, Mask, Badge, Modal } from 'antd-mobile'
// 引入图标
import { PlayOutline } from 'antd-mobile-icons'
// 引入scss 样式文件
import '@/assets/css/detail.scss';
import { useSelector } from 'react-redux'


const Detail = () => {
    const par = useParams();
    const { id } = par;
    // 定义详情数据
    const [detailObj, setDetailobj] = useState({});
    // 定义轮播图数组
    const [swiperArr, setSwiperArr] = useState([]);
    // 定义购物车类别
    const [carNum, setCarNumFn] = useState(0);

    const his = useHistory();
    async function getdata() {
        const res = await getDetailApi({ proid: id })
        // console.log(res)
        setDetailobj(res.data.data);
        const { img1, img2, img3, img4 } = res.data.data
        const swiperNewArr = [img1, img2, img3, img4].map((item, index) => ({
            bannerid: index,
            img: item
        }))

        //console.log('swiperNewArr', swiperNewArr);
        setSwiperArr(swiperNewArr)
    }
    // 定义遮罩层是否显示变量
    const [visible, setVisible] = useState(false)
    const [videoduration, setVideoDuration] = useState(0)
    // 创建ref 引用对象
    const ref1 = useRef()

    // 获取仓库中的数据
    const useId = useSelector(state => state.userId)
    //console.log('useId', useId);
    // 查询购物车数量
    const getCarlist = () => {
        getCarListApi({ userid: useId }).then(res => {
            console.log('res', res);
            setCarNumFn(res.data?.data?.length)
        })
    }

    useEffect(() => {
        getdata()
        // 获取video 标签

        const videoDOM = ref1.current
        // console.log('videoDOM', videoDOM);
        // 给video 标签绑定loadeddata或 canplay事件,表示浏览器已经加载完视频了就触发该事件
        videoDOM.oncanplay = () => {
            // 获取视频时长
            //console.log(videoDOM.duration);
            setVideoDuration(`00'${Math.ceil(document.querySelector('video').duration)}'`)
        }

        // 调用查询购物车接口
        getCarlist()
    }, [])


    return (
        <div className='detail'>
            {/* 头部导航组件 */}
            <Mynavbar>详情</Mynavbar>
            {/* 轮播图组件 */}
            {
                swiperArr.length > 0 ? <Myswiper swiperArr={swiperArr}></Myswiper> : null
            }
            {/* 商品详情数据 */}
            <p style={
                {
                    color: 'red',
                    fontSize: '20px'
                }
            }>${detailObj.originprice}</p>
            <div style={{
                fontSize: '20px',
                fontWeight: 800
            }}>{detailObj.proname}</div>
            {/* 播放按钮 */}
            <Button shape='rounded' size='small' className='playBtn' onClick={() => {
                // 显示遮罩层
                setVisible(true)
            }}>
                <Space>
                    <PlayOutline />
                    <span>{videoduration}</span>
                </Space>
            </Button>
            {/* 遮罩层布局 */}
            <video
                style={{
                    display: 'none'
                }}
                ref={ref1}
                preload='preload'
                src='https://jvod.300hu.com/vod/product/b1024a62-8c46-464c-8ec7-f57d26cceb38/42f70c8e8bbb442e986874ec556fc882.mp4'>
            </video>
            <Mask visible={visible} onMaskClick={() => setVisible(false)}>
                <div className='content'>
                    {visible ? <video
                        preload={'preload'}
                        controls='controls'
                        autoPlay
                        src='https://jvod.300hu.com/vod/product/b1024a62-8c46-464c-8ec7-f57d26cceb38/42f70c8e8bbb442e986874ec556fc882.mp4'>
                    </video> : null}

                </div>
            </Mask>
            {/* 加入购物车tabbar */}
            <Space className='addtabbarbox'>
                <Space style={{ '--gap': '24px' }}>
                    <div className='carbrage' onClick={() => {
                        // 先判断用户是否登录
                        if (localStorage.getItem('token')) {
                            his.push('/cart')
                        } else {
                            Modal.confirm({
                                content: '请先登录!',
                                onCancel() {

                                },
                                onConfirm() {
                                    his.push('/login')
                                }
                            })
                        }

                    }}>
                        <Badge content={carNum}>
                            <span className='iconfont icon-gouwuchekong'></span>
                        </Badge>
                        <span>购物车</span>
                    </div>
                </Space>
                <Button shape='rounded' color='primary' onClick={() => {
                    // 调用加入购物车接口
                    //console.log(detailObj)
                    if (localStorage.getItem('token')) {
                        addCarApi({
                            proid: detailObj.proid,
                            userid: useId,
                            num: 1
                        }).then(res => {
                            // console.log(res)
                            //重新获取购物车类别数量
                            getCarlist()
                        })
                    } else {
                        Modal.confirm({
                            content: '请先登录!',
                            onCancel() {

                            },
                            onConfirm() {
                                his.push('/login')
                            }
                        })
                    }

                }}>加入购物车</Button>
                <Button shape='rounded' color='danger'>立即购买</Button>
            </Space>

        </div>
    );
}

export default Detail;
